<template>
	<div style="margin: 10px 100px">
	  <el-steps style="max-width: 1000px;margin: 10px auto;" :active="1" align-center>
		<el-step title="选择支付方式"  />
		<el-step title="支付成功"  />
	  </el-steps>		
	</div>

  <div style="margin-left: 176px;">订单号：xxxxxx</div>
  <el-table :data="tableData" style="width: 1200px; margin: 30px auto;">
    <el-table-column prop="name" label="商品信息" width="500" />    
	<el-table-column prop="date" label="单价" width="280" />
    <el-table-column prop="name" label="数量" width="280" />
    <el-table-column prop="address" label="小计" />
  </el-table>
  <div style="text-align: right;padding-right: 380px;">
   <span style="width: 70px">总金额：</span>
  </div>
  
  <span style="margin-left: 176px;"> 选择支付方式:</span>
  <div class="flex flex-wrap gap-4" style="padding:20px 176px;">
    <el-card class="card" @click="goPay= true" shadow="hover">
		<div class="pay">
		<img  src="@/components/img/yu-e.png" class="images"/>余额支付</div>
	</el-card>
    <el-card class="card" @click="warn" shadow="hover">	
		<div class="pay">
		<img src="@/components/img/wechat.png" class="images"/>微信支付</div>
	</el-card>
    <el-card class="card" @click="warn" shadow="hover">
		<div class="pay">
		<img src="@/components/img/paid-baby.png" class="images"/>支付宝</div>
	</el-card>
  </div>
  <el-dialog v-model="goPay" title="输入支付密码" width="500" >
	  <el-form :model="form">
	        <el-form-item label="支付密码" :label-width='100'>
	          <el-input v-model="form.password" autocomplete="off" />
	        </el-form-item>
	      </el-form>
	  <div style="margin-left: 200px;">
		<el-button @click="goPay = false">取消支付</el-button>
		<el-button type="primary" @click="goSuccess">确认支付</el-button>
	  </div>
  </el-dialog>
  
</template>

<script setup>
	import { reactive,ref } from 'vue'
	import { ElMessage } from 'element-plus'
	import { useRouter } from 'vue-router';

	const warn = () => {
	  ElMessage({
		message: '该功能还未启用，敬请期待！',
		type: 'warning',
	  })
	}
	const goPay = ref(false)
	const form = reactive({
	  password: ''
	})
	const router = useRouter()
	const goSuccess = () =>{
		router.push('/pay-success')
	}
</script>

<style lang="scss" scoped>
	.flex {
	  display: flex; 
	  justify-content: space-between;}
	.gap-4 { gap: 20px;}
	.card{
		width: 260px;
		font-size: 26px;
	}
	.pay{
		display: flex;
		align-items: center;
	}
	.images{
		width: 43px;
		margin-right: 16px;
	}
</style>